{% extends "email/base.html" %} {% load posthog_assets %} {% load posthog_filters %} {% block head %}

<style type="text/css">
    .number-group .big {
        font-size: 48px;
        font-weight: 600;
    }

    .number-group .caption {
        color: #666666;
    }

    .feedback {
        text-align: center;
        font-weight: 600;
    }

    .feedback a {
        font-weight: 600;
    }

    .distributionBar {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        width: 100%;
        height: 26px;
        margin-top: 32px;
    }

    .distributionBar div {
        height: 100%;
        display: inline-block;
        float: left;
    }

    .distributionBar div:first-child {
        border-top-left-radius: 10px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 0px;
    }

    .distributionBar div:last-child {
        border-top-left-radius: 0px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 10px;
    }

    .graphDetails {
        margin-top: 32px;
    }

    .graphDetails .sample {
        width: 24px;
        height: 24px;
        display: inline-block;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .graphDetails .sampleCaption {
        vertical-align: top;
        padding-left: 8px;
    }

    .newUsers {
        background-color: #3547fd;
    }

    .retainedUsers {
        background-color: #8f98ff;
    }

    .resurrectedUsers {
        background-color: #ced2ff;
    }

    .deltaIcon {
        width: 20px;
    }

    .cta {
        margin-bottom: 48px;
    }
</style>

<style type="text/css" inline="false">
    @media only screen and (max-width: 480px) {
        .graphDetails {
            margin-top: 16px !important;
        }
        .graphDetails td {
            text-align: left !important;
        }

        .grid .column {
            margin-top: 16px !important;
        }
    }
</style>

{% endblock %} {% block preheader %}{{preheader}}{% endblock %}{% block header %}
<div class="mainTitle">
    <table cellpadding="0" cellspacing="0" class="grid">
        <tr>
            <td align="left" valign="middle" width="50%" class="column">{{ block.super }}</td>
            <td align="center" valign="middle" width="50%" class="column">
                <div>Weekly report {% if team %} - {{team}} {% endif %}<span class="beta">BETA</span></div>
                <div class="secondary">{{period_start | date:"M d, Y" }} - {{period_end | date:"M d" }}</div>
            </td>
        </tr>
    </table>
</div>

{% endblock %} {% block main %}

<div class="container">
    <div class="section">
        <h2>Active Users</h2>
        <span>Summary of all the active users for your organization.</span>

        <table cellpadding="0" cellspacing="0" width="600" class="grid spacingTop">
            <tr>
                <td align="center" valign="top" width="50%" class="column">
                    <div class="number-group">
                        <div class="big">{{ active_users | compact_number }}</div>
                        <div class="caption">total users</div>
                    </div>
                </td>
                <td align="center" valign="top" width="50%" class="column">
                    <div class="number-group">
                        <div class="big">
                            {% if active_users_delta and active_users_delta > 0 %}
                            <img src="{% absolute_asset_url 'email/arrow-up-green.png' %}" alt="" class="deltaIcon" />
                            {% elif active_users_delta %}
                            <img src="{% absolute_asset_url 'email/arrow-down-red.png' %}" alt="" class="deltaIcon" />
                            {%endif%} {{active_users_delta | percentage }}
                        </div>
                        <div class="caption">from last week</div>
                    </div>
                </td>
            </tr>
        </table>
        <div class="distributionBar">
            <div class="newUsers" style="width: {{ user_distribution.new | percentage:0 }}"></div>
            <div class="retainedUsers" style="width: {{ user_distribution.retained | percentage:0 }}"></div>
            <div class="resurrectedUsers" style="width: {{ user_distribution.resurrected | percentage:0 }}"></div>
        </div>

        <div class="graphDetails">
            <table cellpadding="0" cellspacing="0" width="600" class="grid">
                <tr>
                    <td align="center" valign="top" width="33%" class="column">
                        <div class="newUsers sample"></div>
                        <span class="sampleCaption">new users ({{ user_distribution.new | percentage:0 }})</span>
                    </td>
                    <td align="center" valign="top" width="33%" class="column">
                        <div class="retainedUsers sample"></div>
                        <span class="sampleCaption"
                            >retained users ({{ user_distribution.retained | percentage:0 }})</span
                        >
                    </td>
                    <td align="center" valign="top" width="33%" class="column">
                        <div class="resurrectedUsers sample"></div>
                        <span class="sampleCaption"
                            >resurrected users ({{ user_distribution.resurrected | percentage:0 }})</span
                        >
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="section">
        <h2>Churned Users</h2>
        <span>Information from users that were seen last week but were not seen again this week.</span>

        <table cellpadding="0" cellspacing="0" width="600" class="grid spacingTop">
            <tr>
                <td align="center" valign="top" width="33%" class="column">
                    <div class="number-group">
                        <div class="big">{{ churned_users.abs | compact_number }}</div>
                        <div class="caption">churned users</div>
                    </div>
                </td>
                <td align="center" valign="top" width="33%" class="column">
                    <div class="number-group">
                        <div class="big">{{ churned_users.ratio | percentage }}</div>
                        <div class="caption">of last week's active users</div>
                    </div>
                </td>
                <td align="center" valign="top" width="33%" class="column">
                    <div class="number-group">
                        <div class="big">
                            {% if churned_users.delta > 0 %}
                            <img src="{% absolute_asset_url 'email/arrow-up-red.png' %}" alt="" class="deltaIcon" />
                            {% else %}
                            <img src="{% absolute_asset_url 'email/arrow-down-green.png' %}" alt="" class="deltaIcon" />
                            {% endif %} {{ churned_users.delta | percentage }}
                        </div>
                        <div class="caption">from last week</div>
                    </div>
                </td>
            </tr>
        </table>
    </div>

    <div class="section">
        <h2>Project metrics</h2>
        <span>This section is coming soon.</span>
    </div>

    <div class="textCenter cta">
        <a class="button" href="{% absolute_uri %}/insights">Open my metrics</a>
    </div>

    <div class="feedback">
        This is a new feature on PostHog. Please
        <a href="mailto:hey@posthog.com?subject=Feedback%20on%20weekly%20report">share feedback</a> with us!
    </div>
</div>
{% endblock %}
